<!--
 * @name score
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-03
 -->

<template>
  <div class="p-score common-bg common-layout">
    <page-title
      :discipline="gameInfo.discipline"
      :event="gameInfo.event"
      :match="gameInfo.match"
      :type="gameInfo.type"
      :startTime="gameInfo.startTime"
      :eventName="gameInfo.eventName"
      :showTime="true"
    ></page-title>
    <div class="content">
      <div class="content-top">
        <div class="line1">
          <div class="order">{{ atheleteInfo.Order }}</div>
          <div class="name">{{ atheleteInfo.AthleteName }}</div>
          <div class="club">{{ atheleteInfo.CountryName }}</div>
        </div>
        <div class="line1">
          <div class="order horseOrder">{{ atheleteInfo.HorseOrder }}</div>
          <div class="name horseName">{{ atheleteInfo.HorseName }}</div>
          <div class="line1-time">
            <div class="time">
              {{ atheleteInfo.time }}
            </div>
          </div>
        </div>
        <div class="line3">
          <div class="item">
            <!-- <div>（{{ atheleteInfo.Order }}）</div> -->
            <div>{{ atheleteInfo.Posture }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const gameInfo = ref({
  discipline: '马术',
  match: '',
  event: 'EVENTEAM',
  type: '实时成绩',
  startTime: '13:01:29',
  eventName: '',
  matchType: '',
})

const atheleteInfo = ref({
  order: 1,
  name: '杨舒涵',
  delegation: '中国',
  horseOrder: 201,
  club: '好骑士嘉豪马术',
  horseName: 'Joanna',
  time: '00:00',
})

const process = ref([{ name: '立定敬礼', order: 1 }])

const rankData = ref([
  {
    scoreE: '63.970',
    scoreH: '63.970',
    scoreC: '63.970',
    scoreM: '63.970',
    scoreB: '63.970',
    rank: 1,
    percentage: '64.852',
    delegation: '广东',
    name: '顾兵',
    horseName: '东哥',
  },
  {
    scoreE: '63.970',
    scoreH: '63.970',
    scoreC: '63.970',
    scoreM: '63.970',
    scoreB: '63.970',
    rank: 2,
    percentage: '64.852',
    delegation: '广东',
    name: '顾兵',
    horseName: '东哥',
  },
  {
    scoreE: '63.970',
    scoreH: '63.970',
    scoreC: '63.970',
    scoreM: '63.970',
    scoreB: '63.970',
    rank: 3,
    percentage: '64.852',
    delegation: '广东',
    name: '顾兵',
    horseName: '东哥',
  },
  {
    scoreE: '63.970',
    scoreH: '63.970',
    scoreC: '63.970',
    scoreM: '63.970',
    scoreB: '63.970',
    rank: 4,
    percentage: '64.852',
    delegation: '广东',
    name: '顾兵',
    horseName: '东哥',
  },
  {
    scoreE: '63.970',
    scoreH: '63.970',
    scoreC: '63.970',
    scoreM: '63.970',
    scoreB: '63.970',
    rank: 5,
    percentage: '64.852',
    delegation: '广东',
    name: '顾兵',
    horseName: '东哥',
  },
  {
    scoreE: '63.970',
    scoreH: '63.970',
    scoreC: '63.970',
    scoreM: '63.970',
    scoreB: '63.970',
    rank: 6,
    percentage: '64.852',
    delegation: '广东',
    name: '顾兵',
    horseName: '东哥',
  },
])

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const params = ref({})
const procName = ref([])

onBeforeMount(() => {})
onMounted(() => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

watchEffect(() => {
  if (results.value?.datasetList?.length) {
    gameInfo.value.event = results.value.datasetList[0][0]?.EventCode
    gameInfo.value.match = results.value.datasetList[0][0]?.MatchName
    gameInfo.value.eventName = results.value.datasetList[0][0]?.EventName
    gameInfo.value.matchType = results.value.datasetList[0][0]?.MatchType
    atheleteInfo.value = results.value.datasetList[0][0]
    rankData.value = results.value.datasetList[1] || []
  }
})

watch(
  () => route.query,
  async (val) => {
    params.value = val
    await getData()
  },
  { immediate: true }
)
</script>

<style scoped lang="scss">
@import '@/assets/scss/dressage/score5';
</style>
